<template>
  <div :id="id" :class="className" :style="{ height, width }"></div>
</template>

<script setup>
import * as echarts from "echarts";
const props = defineProps({
  className: {
    type: String,
    default: "chart",
  },
  id: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "300px",
  },
});

const options = {
  xAxis: [
    {
      type: "category",
      axisLine: {
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        textStyle: {
          color: "#556677",
        },
        fontSize: 12,
        margin: 15,
      },
      axisPointer: {
        label: {
          padding: [11, 5, 7],
          margin: 15,
          fontSize: 12,
          backgroundColor: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#fff", // 0% 处的颜色
              },
              {
                // offset: 0.9,
                offset: 0.86,
                /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                        */
                color: "#fff", // 0% 处的颜色
              },
              {
                offset: 0.86,
                color: "#33c0cd", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#33c0cd", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      boundaryGap: false,
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      splitLine: {
        show: false,
      },
    },
    {
      type: "value",
      position: "left",
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#556677",
        },
        formatter: "{value}",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#DCE2E8",
        },
      },
      splitLine: {
        show: false,
      },
    },
  ],
  series: [
    {
      data: [0, 150, 230, 224, 218, 135, 147, 260],
      type: "line",
      smooth: true,
      showSymbol: false,
      lineStyle: { color: "#73DDFF" },
    },
  ],
};
const chart = ref(null);
onMounted(() => {
  // 图表初始化
  chart.value = markRaw(echarts.init(document.getElementById(props.id)));

  chart.value.setOption(options);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.value.resize();
  });
});

onActivated(() => {
  if (chart.value) {
    chart.value.resize();
  }
});
</script>

<style scoped lang="scss"></style>
